<template>
  <div class="date-box">
    <p class="cmtitle">选择日期</p>
    <div class="block flex">
      <Datepicker
        :language="es"
        :inline="true"
        class="date-comp"
        :disabled-dates="{customPredictor}"
        v-model="value1"
      />
      <Datepicker
        v-model="value2"
        :language="es"
        :inline="true"
        :disabled-dates="{customPredictor}"
        class="date-comp"
      />
      <!-- <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="date-el"
        ref="date"
        popper-class="date-bo"
        @blur="blur"
      >
      </el-date-picker> -->
    </div>
  </div>
</template>

<script>
import { getReservedateList } from '@/http/protocol'
import Datepicker from 'vuejs-datepicker'
import { zh } from 'vuejs-datepicker/dist/locale'
import moment from 'moment'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'date',
  components: {
    Datepicker
  },
  computed: {
    ...mapState('ticketinfo', ['ticket', 'reservedate'])
  },
  watch: {
    ticket (val = {}) {
      if (val) {
        this.getReservedateList(val.id)
      }
    },
    value1 (val) {
      if (this.resultList.length > 0) {
        const item = this.resultList.find(item => {
          return moment(item.reservedate).startOf('day').valueOf() === moment(val).startOf('day').valueOf()
        })
        this.setReservedate({ ...item })
      }
    },

    value2 (val) {
      if (this.resultList.length > 0) {
        const item = this.resultList.find(item => moment(item.reservedate).startOf('day').valueOf() === moment(val).startOf('day').valueOf())
        this.setReservedate({ ...item })
      }
    }
  },
  data () {
    return {
      value1: null, // moment().valueOf()
      value2: null,
      // moment().month(moment().month() + 1).startOf('month').valueOf()
      es: zh,
      resultList: []
    }
  },

  mounted () {
  },
  methods: {
    ...mapMutations('ticketinfo', ['setReservedate']),
    // 查询可预约时期
    async getReservedateList (id) {
      const res = await getReservedateList(id)
      // console.log(res)
      if (res.success) {
        const { resultList = [] } = res.data
        this.resultList = resultList
        if (resultList.length > 0) {
          this.setReservedate({ ...(resultList[0] || {}) })
          console.log(resultList[0])
          const date = (resultList[0] || {}).reservedate
          if (moment(date).month() > moment().month()) {
            this.value2 = moment(date).valueOf()
          } else {
            this.value1 = moment(date).valueOf()
          }
        }
      } else {
        this.$err(res.msg)
      }
    },
    customPredictor (date) {
      if (!this.resultList || this.resultList.length === 0) {
        return true
        // return moment(date).startOf('day').valueOf() < moment().startOf('day').valueOf()
      } else {
        return !(this.resultList.map(item => moment(item.reservedate).startOf('day').valueOf()).includes(moment(date).startOf('day').valueOf()))
      }
    }

  }
}
</script>

<style scoped lang="less">
.date-box {
  padding-top: 32px;
  .block {
    height: 320px;
    margin-top: 8px;
  }
  .date-el {
    margin-top: 8px;
  }

  .date-comp {
    width: 50%;
    background: #ffffff;
    /deep/.vdp-datepicker__calendar {
      width: 100%;
      height: 320px;

      .prev {
        visibility: hidden;
      }

      .cell {
        font-size: 16px;
        color: #333333;
        height: 39px;
        padding: 0 5px;
        // background-clip: content-box;
      }
      .disabled {
        color: #cccccc;
      }
      .selected {
        background-color: #009769;
        border-radius: 6px;
        font-weight: 700;
        padding: 0 5px;
        // background-clip: content-box !important;
        color: #ffffff;
      }
    }
    /deep/.vdp-datepicker__calendar {
      border: 1px solid #f2f2f2;
    }
    &:first-child {
       /deep/.next{
         visibility: hidden;
       }
    }
    &:last-child {
      /deep/.vdp-datepicker__calendar {
        border-left: none;
        .prev {
          visibility: hidden;
        }
        .next {
          &:after {
            border-left: none;
            background: url("../../assets/2.png") no-repeat center center;
            width: 20px;
            height: 20px;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
